<template>
	<view>
		<view class="pass-info">
			<view class="item">
				<view class="title">登录账号</view>
				<view class="input">
					<input type="text" class="inp" v-model="userinfo.username" disabled placeholder-class="place-class" placeholder="请输入登录账号">
				</view>
			</view>
			
			<view class="item">
				<view class="title">旧密码</view>
				<view class="input">
					<input type="password" class="inp" v-model="formData.password_old" placeholder-class="place-class" placeholder="请输入旧密码">
				</view>
			</view>
			
			<view class="item">
				<view class="title">新密码</view>
				<view class="input">
					<input type="password" class="inp" v-model="formData.password" placeholder-class="place-class" placeholder="密码需字母、数字组合不能少于6位数">
				</view>
			</view>
			
			<view class="item">
				<view class="title">确认密码</view>
				<view class="input">
					<input type="password" class="inp" v-model="formData.newPassword" placeholder-class="place-class" placeholder="密码需字母、数字组合不能少于6位数">
				</view>
			</view>
		</view>
		
		<view class="submit-btn" @click="submitConfirm">确认</view>
		
		<u-popup :show="editPassPopupShow" mode="center" :closeOnClickOverlay="false" :safeAreaInsetTop="true" bgColor="transparent">
			<view class="edit-success-popup">
				<view class="icon">
					<image src="/static/images/edit-pass-success.png" mode="widthFix" class="img"></image>
				</view>
				<view class="title">修改成功</view>
				<view class="subjet">您的密码已修改生效，请重新登录</view>
				<view class="login-btn" @click="loginPage">重新登录</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import {editPass, getUserinfo} from '@/api/user.js';
	export default {
		data() {
			return {
				editPassPopupShow: false,
				userinfo: {},
				formData: {
					password: '',
					password_old: '',
					newPassword: ''
				}
			};
		},
		async onLoad() {
			await this.loadData();
		},
		methods: {
			...mapMutations(['logout']),
			loginPage() {
				uni.reLaunch({
					url: '/pages/login/index'
				});
			},
			async submitConfirm() {
				try {
					let formData = this.formData;
					if (!formData.password_old) {
						throw new Error('请输入旧密码');
					}
					if (!formData.password) {
						throw new Error('请输入新密码');
					}
					if (formData.password_old == formData.password) {
						throw new Error('新旧密码一致');
					}
					if (formData.password != formData.newPassword) {
						throw new Error('两次输入密码不一致');
					}
					delete formData.newPassword;
					await editPass(formData);
					this.logout();
					this.editPassPopupOpen();
				} catch (error) {
					uni.showToast({
						title: error.message,
						icon: 'none'
					});
				}
			},
			async loadData() {
				try {
					let res = await getUserinfo();
					this.userinfo = res.data;
				} catch (error) {
					
				}
			},
			editPassPopupOpen() {
				this.editPassPopupShow = true;
			},
			editPassPopupClose() {
				this.editPassPopupShow = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
		
	.pass-info {
		padding: 30rpx 30rpx 200rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		
		.item {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			border-bottom: 2rpx solid rgba(#979797, .14);
			
			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #666;
			}
			
			.input {
				flex: 1;
				padding-left: 30rpx;
				box-sizing: border-box;
				
				.inp,
				.place-class {
					font-size: 30rpx;
					font-weight: 500;
					color: #999;
					text-align: right;
				}
				
				.inp {
					width: 100%;
					color: #333;
				}
			}
		}
	}

	.submit-btn {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 80rpx;
		height: 88rpx;
		z-index: 9;
		background-color: #E82E2E;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.edit-success-popup {
		width: 580rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 50rpx 80rpx;
		
		.icon {
			width: 100%;
			height: 198rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.img {
				width: 208rpx;
				height: 198rpx;
			}
		}
		
		.title {
			text-align: center;
			margin-top: 38rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #343434;
			line-height: 50rpx;
		}
		
		.subjet {
			text-align: center;
			margin-top: 16rpx;
			margin-bottom: 78rpx;
			font-size: 28rpx;
			color: #666;
			font-weight: 500;
			line-height: 40rpx;
		}
		
		.login-btn {
			width: 100%;
			height: 80rpx;
			background: linear-gradient(55deg, #E6201A 0%, #FF3023 100%);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
</style>
